<template>
  <div id="app">
    <header class="header">
      <mainNav />
    </header>
    <main class="main">
      <keep-alive include="Home">
        <router-view></router-view>
      </keep-alive>
    </main>
  </div>
</template>

<script>
import mainNav from '@/components/nav/mainNav.vue';
export default {
  name: "app",
  components: {
    mainNav
  }
}
</script>
<style lang="scss" scoped>
#app {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  >.header {
    padding: 0 10px 0 10px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    background-color: rgba(241, 239, 242, 0.562);
  }

  >.main {
    width: 100%;
    height: calc(100% - 60px);
    border: solid 1px rgb(119, 117, 117);
    overflow-y: auto;
    overflow-x: hidden;
  }
}

// 屏幕纵向布局

@media screen and (max-width:768px) {
  // 超小屏 
}

@media screen and (min-width:768px) and (max-width: 992px) {
  // 中等屏 
}

@media screen and (min-width:992px) and (max-width:1200px) {
  // 大屏 
}

@media screen and (min-width:1200px) {
  // 超大屏 
}
</style>
